<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view>
			<text class="title" @click="showPicker()">{{title}}</text>
		</view>
		<lb-picker ref="picker1" :list='list' :level="3" :props='myProps' mode="multiSelector"></lb-picker>
	</view>
</template>

<script>
	import areaList from '../../common/js/area-data-min.js';
	import LbPicker from '@/components/lb-picker';
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				title: 'Hello',
				list: areaList,
				myProps: {
					label: 'name',
					value: 'id',
					children: 'children'
				},
			}
		},
		onLoad() {

		},
		methods: {
			showPicker() {
				this.$refs.picker1.show()
			},
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
</style>
